<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻详情</title>

    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="./utils.js"></script>
    <script src="./common.js"></script>
    <script src="./page.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /* 设置body高度为100%窗口高度 */
            height: 100%;
            width: 100%;
            /* 弹性盒子模型 */
            background: #ADA996;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

        }

        /* 导航栏 */
        .home-nav {
            background: linear-gradient(45deg, #8da5ba, #778b9d);
            box-shadow: 8px -8px 16px #9fa6ac,
                -8px 8px 16px #a4afb9;
        }

        .layui-nav .userInfo {
            float: right;
        }

        .layui-nav-bar {
            background-color: #9eb9d1;
        }

        /* 新闻详情 */
        .news-content {
            width: 600px;
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            padding: 100px;
            margin-top: 20px;
        }

        .news-discuss {
            width: 600px;
            height: 300px;
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .news-discuss textarea {
            width: 600px;
            height: 200px;
            resize: none;

        }

        .news-discuss .layui-btn {
            background: #b5b1a1;
            float: right;
        }
    </style>
</head>

<body>
    <div class="home-nav">
        <ul class="layui-nav">
            <li class="layui-nav-item"><a href="">导航</a></li>

            <li class="layui-nav-item userInfo"><a href="">登录</a></li>
        </ul>
    </div>
    <h1>新闻标题</h1>
    <!-- 新闻详情 -->
    <div class="news-content">


    </div>

    <!-- 新闻评论 -->
    <div class="news-discuss">
        <textarea cols="30" rows="10"></textarea>
        <button class="layui-btn addComment" type="button">立即发布评论</button>

    </div>
    <ol class="news-discuss-ol" style="margin-top: 20px; width: 610px; margin-left: auto; margin-right: auto;">
        <li>
            <div class="cmment-content">评论内容</div>
            <div class="comment-edit">
                <button>点赞</button>
                <button>删除</button>
            </div>
        </li>
    </ol>
    <div class="page"></div>
</body>

</html>
<script>
    // 获取用户登录信息  传递的名称需要与设置的名称一致
    // 目前取出的userInfo 可能是JSON格式的字符串 也可能是空
    let userInfo = JSON.parse(getCookie('activeInfo'))
    let newsId = JSON.parse(getCookie('newId'))
    let activeInfo = getCookie('userInfo') ? JSON.parse(getCookie('activeInfo')) : null;
    if (userInfo) {
        // 登录状态
        document.querySelector('.userInfo').innerHTML = `${userInfo.mobile} 用户欢迎`
    } else {
        document.querySelector('.userInfo').innerHTML = '<a href="login.html">登录</a>'
    }
    ajax({
        url: 'http://phpclub.org.cn/edu/server/getContent.php',
        data: { id: newsId },
        success: function (response) {
            // 显示信息内容
            document.querySelector('h1').innerHTML = response.data.title;
            document.querySelector('.news-content').innerHTML = response.data.content
        }
    })
    // 发布评论
    document.querySelector('.addComment').onclick = function () {
        if (!userInfo) {
            // 说明用户目前没有登录  跳转到登录页
            // encodeURIComponent是js中内置函数 将字符串转换为URL编码格式 
            location.href = 'login.html?callback=' + encodeURIComponent(location.href);
            return;
        }
        // 说明用户已经登录
        ajax({
            url: 'http://phpclub.org.cn/edu/server/addComment.php',
            type: 'post',
            data: { userId: userInfo.id, newsId, content: document.querySelector('textarea').value },
            success: function (backData) {
                console.log(backData)
                init()
            }
        });
    }


    let newData = null;
    function init() {
        let data = { newsId, page: 1, pageSize: 15 }
        if (userInfo) {
            // 用户登录
            data.userId = userInfo.id;
        }
        ajax({
            url: 'http://phpclub.org.cn/edu/server/getComment.php',
            data,
            success: function (response) {
                console.log(response.data[0]);
                newData = response.data
                let html = '';
                response.data.forEach(item => {
                    html += `<li>
                    <div class="cmment-content">${item.content}</div>
                    <div class="comment-edit">
                        <button class="good">点赞</button>
                        <button class="del">删除</button>
                        <span class='hasLike'>${item.hasLike}</span>
                    </div>
                </li>`
                })
                document.querySelector('.news-discuss-ol').innerHTML = html;
            }
        })
    }
    init();

    document.querySelector('.news-discuss-ol').addEventListener('click', e => {
        // 点赞
        if (e.target.className == 'del') {
            let delList = document.querySelectorAll('.del')
            let index = [...delList].indexOf(e.target)
            // 评论ID
            let commentId = newData[index].id
            ajax({
                url: 'http://phpclub.org.cn/edu/server/deleteComment.php',
                data: {
                    userId: userInfo.id, commentId
                },
                success: function (response) {
                    console.log(response);
                    init();
                }
            })
        }
        // 删除
        if (e.target.className == 'good') {
            let goodList = document.querySelectorAll('.good')
            let index = [...goodList].indexOf(e.target)
            // 评论ID
            let commentId = newData[index].id
            ajax({
                url: 'http://phpclub.org.cn/edu/server/commentLike.php',
                data: {
                    userId: userInfo.id, commentId
                },
                success: function (response) {
                    let hasLike = document.querySelectorAll('.hasLike')
                    hasLike[index].innerHTML++
                    console.log(response);
                    init();
                }
            })
        }
    })
</script>

</html> -->